import React, { ReactNode, MouseEvent, useMemo, useEffect } from 'react'

interface IProps {
  visible: boolean;
  children: ReactNode;
  destroyOnClose?: boolean;
  width?: number | string;
}
export default function GmDialog(props: IProps) {
  const { visible, destroyOnClose = false, width } = props;
  const dealWidth = useMemo<string>(() => {
    if (width) {
      if (typeof width === 'number') {
        return width + 'px';
      }
      return width;
    } else {
      return '520px';
    }
  }, [width]);

  useEffect(() => {
    document.addEventListener('click', close)
  })
  const close = (a: any) => {
    console.log(a)
    // @ts-ignore
    // console.log(e, e.target)
  }
  return (
    <dialog className="modal-root" open={visible}>
      <div className="modal-mask" ></div>
      <div className="modal-wrap" >
        {
          !destroyOnClose && <div style={{ width: dealWidth }} className="modal">
            <header>
              头部
            </header>
            <div>
              {props.children}
            </div>
            <footer>
              底部按钮
            </footer>
          </div>
        }
      </div>
      <style jsx>{`
        .modal {
          color: rgba(0,0,0,.85);
          font-size: 14px;
          font-variant: tabular-nums;
          line-height: 1.5715;
          list-style: none;
          pointer-events: none;
          position: relative;
          top: 100px;
          width: auto;
          max-width: calc(100vw - 32px);
          margin: 0 auto;
          padding: 0 0 24px;
          background: white;
        }
      `}</style>
    </dialog>
  )
}
